<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数防抖</title>
</head>
<body>

  <!-- 函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，
    重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。 -->
  <script>
    function debounce(fn, wait) {
      let timer;
      return function() {
        console.log(timer) // 时间
        if(timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(fn, wait)
      }
    }

    function handle() {
      console.log(Math.random(), '随机数')
    }

    // 如果浏览器的视口一直变化，则一直触发 debounce 函数，防抖之后，直到浏览器视口没有变化时，再去执行函数
    window.addEventListener("resize", debounce(handle, 9000))  //停了一段时间之后才执行这个函数
  </script>
</body>

<!-- 函数防抖其实是分为 “立即执行版” 和 “非立即执行版” 的，根据字面意思就可以发现他们的差别，所谓立即执行版就是 触发事件后函数不会立即执行，
  而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 而 “非立即执行版” 指的是 触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。。 -->
</html>